<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { lunar } from '@/assets/lunar.js';
import PreYear from '@/assets/img/preYear.png'
import PreMonth from '@/assets/img/preMonth.png'
import NextMonth from '@/assets/img/nextMonth.png'
import NextYear from '@/assets/img/nextYear.png'
import Clock from '@/assets/img/clock.png'
const weeks = ['日', '一', '二', '三', '四', '五', '六']
const calendar = ref(null);
const router = useRouter();
const list = ref([])
const curDateList = ref([])
const markDate = ref([])
const jumpMonthOrYear = ref(false)
const userId = ref('')
const isDateClick = ref(false)
const getUserId = async () => {
  if (typeof AOS == 'object') {
    let userInfo = JSON.parse(AOS.getUserInfo())
    userId.value = userInfo.userId
  } else {
    userId.value = '6cf98be6-fc7c-4b99-a92a-05f484a8dd5e'
  }
}
getUserId()
const showLunar = (date) => {
  if (!date || !date.day) return;

  const lunarObj = lunar.solar2lunar(date.year, date.month + 1, date.day);

  return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn;
};
const time = ref('')
const getRc = (date1) => {
  if (!date1) {
    let date = new Date()
    time.value = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2)
  } else {
    time.value = date1
  }
  let formData = new FormData();
  formData.append('userId', userId.value);
  formData.append('scheduleType', '0');
  formData.append('time', time.value);
  let obj = {}
  if (typeof AOS == 'object') {
    let userInfo = JSON.parse(AOS.getUserInfo())
    obj = {
      headers: {
        'Authorization': 'Bearer' + ' ' + userInfo.token
      }
    }
  }
  axios.post('/TrueIDS/remind/getMothRemindList', formData, obj)
    .then(response => {
      console.log(response.data)
      list.value = response.data.obj;
      curDateList.value = response.data.obj
      // if (!jumpMonthOrYear.value) {
      markDate.value = list.value.map(item => item.startTime.substring(0, 10).replaceAll('-', '/'))
      // }
      // jumpMonthOrYear.value = false
    })
    .catch(error => {
      console.error(error);
    });
}

const changeYearOrMonth = (isYear, type) => {
  console.log(isYear, type)
  if (!isYear) {
    if (type === 'up') {
      calendar.value.lastMonth();
    } else {
      calendar.value.nextMonth();
    }
    jumpMonthOrYear.value = true;
  } else {
    if (type === 'up') {
      curYear.value = Number(curYear.value) - 1
    } else {
      curYear.value = Number(curYear.value) + 1
    }
    jumpMonthOrYear.value = true;
    calendar.value.reset(new Date(curYear.value, curMonth.value - 1));
  }
}
const curYear = ref('')
const curMonth = ref('')
const formatYearMonth = () => {
  let date = new Date()
  curYear.value = date.getFullYear();
  curMonth.value = ('0' + (date.getMonth() + 1)).slice(-2);
  return `${curYear.value}年${curMonth.value}月`;
}
const curYearMonth = ref(formatYearMonth())
const dataList = ref([1, 2, 3, 4, 5, 6])

const dataChange = (data) => {
  if (isDateClick.value) {
    isDateClick.value = false;
    return;
  }
  console.log('dataChange', data)
  curYear.value = data.substring(0, 4)
  curMonth.value = data.substring(5, 7)
  const day = data.substring(8, 10)
  curYearMonth.value = curYear.value + '年' + curMonth.value + '月'
  // if (jumpMonthOrYear.value) {
  //   time.value = curYear.value + '-' + curMonth.value
  // } else {
  time.value = curYear.value + '-' + curMonth.value + '-' + day
  // }
  getRc(time.value)
}
const jumpDetail = (id) => {
  console.log(id)
  router.push({
    path: '/ckrc',
    query: {
      id: id,
      userId: userId.value
    }
  })
}
const gsh = (year, month, day) => {
  const date = new Date(year, month - 1, day);
  const weekDay = weeks[date.getDay()];
  return `${year}年${month}月${day}日 周${weekDay}`;
}
const getSX = (time) => {
  const str = time.substring(11, 16);
  const hour = parseInt(str.substring(0, 2));
  if (hour < 12) {
    return '上午'
  } else {
    return '下午'
  }
}
const getSx1 = (time) => {
  return time.substring(11, 16);
}
const jumpAddRc = () => {
  router.push({
    path: '/zjrc',
    query: {
      userId: userId.value
    }
  })
}
const riqiClick = (date) => {
  console.log('riqiClick', date)
  isDateClick.value = true;
  curDateList.value = list.value.filter(item => item.startTime.substring(0, 10) == date)
  curYearMonth.value = date.substring(0, 4) + '年' + date.substring(5, 7) + '月'
}
</script>

<template>
  <Header class="header" :isBack="false" name="日程安排" myTitle="日程安排" :isSearch="true" :isDelete="false" :isEdit="true"
    :isRili="true" :isComplete="false" :userId="userId" @addRc="jumpAddRc"></Header>
  <vue-hash-calendar class="myCalendar" ref="calendar" @change="dataChange" format="YY-MM-DD" :mark-date="markDate"
    @click="riqiClick">
    <template #action>
      <div class="action">
        <div class="preYear" @click="changeYearOrMonth(true, 'up')"><img :src="PreYear" /></div>
        <div class="preMonth" @click="changeYearOrMonth(false, 'up')"><img :src="PreMonth" /></div>
        <div class="curYearMonth">{{ curYearMonth }}</div>
        <div class="nextMonth" @click="changeYearOrMonth(false, 'down')"><img :src="NextMonth" /></div>
        <div class="nextYear" @click="changeYearOrMonth(true, 'down')"><img :src="NextYear" /></div>
      </div>
    </template>
    <!-- <template v-slot:day="scope">
        <div class="lunar-content">
          <div>{{ scope?.date.day }}</div>
          <div class="lunar">{{ showLunar(scope?.date) }}</div>
        </div>
      </template> -->
  </vue-hash-calendar>
  <div class="list">
    <div class="item" v-for="item in curDateList" :key="item.id" @click="jumpDetail(item.id)">
      <div class="itemFirst">
        <div class="itemFirstLeft">{{ gsh(item.year, item.month, item.day) }}</div>
        <!-- <div class="itemFirstRight">
          <img :src="Clock" />
          <span>{{ item.txsj }}</span>
        </div> -->
      </div>

      <div class="itemSecond">
        <div class="itemSecond1" :class="item.is_complete == 1 ? '' : 'yellow'">{{ item.is_complete == 1 ? '已办' : '待办'
        }}
        </div>
        <div class="itemSecond2">{{ getSX(item.startTime) }}</div>
        <div class="itemSecond3">{{ getSx1(item.startTime) }}</div>
        <!-- <div class="itemSecond4"></div> -->
        <div class="itemSecond5"></div>
        <div class="itemSecond6"></div>
      </div>

      <div class="itemThree">事项：{{ item.remark }}</div>
    </div>

  </div>
</template>
<style scoped>
.lunar-content {
  text-align: center;
  font-size: 14px;
  color: #333;
}

.lunar {
  font-size: 12px;
  transform: scale(0.8);
  width: 10vw;
  text-align: center;
}

.header {
  height: 60px;
  flex-shrink: 0;
}

.myCalendar {
  flex-shrink: 0;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  height: 56px;
  width: 100%;
  gap: 16px;

  .preYear,
  .preMonth,
  .nextYear,
  .nextMonth {
    width: 24px;
    height: 24px;
    background: #F5F8FC;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      height: 11px;
    }
  }

  .curYearMonth {
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    padding: 0 10px;
  }
}


.list {
  margin-top: 10px;
  background: white;
  overflow: auto;
  flex-grow: 1;

  .item {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid #E3E3E3;

    .itemFirst {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .itemFirstLeft {
        color: #000000;
        font-size: 18px;
        font-weight: 500;
      }

      .itemFirstRight {
        height: 20px;
        background: #589FF6;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 10px;

        img {
          width: 12px;
          height: 12px;
        }

        span {
          color: #FFFFFF;
          font-size: 12px;
        }
      }
    }

    .itemSecond {
      display: flex;
      align-items: center;

      .itemSecond1 {
        background: #909DB6;
        border-radius: 10px;
        color: white;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        padding: 0 10px;
        margin-right: 6px;

        &.yellow {
          background: #FFB800;
        }
      }

      .itemSecond2,
      .itemSecond5 {
        color: #000000;
        font-size: 14px;
        font-weight: 500;
        margin-right: 10px;
      }

      .itemSecond3,
      .itemSecond6 {
        color: #589FF6;
        font-size: 14px;
        font-weight: 500;
        margin-right: 12px;
      }

      .itemSecond4 {
        width: 1.5px;
        height: 15.5px;
        background: #E3E3E3;
        margin-right: 16px;
      }
    }

    .itemThree {
      color: #909DB6;
      font-size: 14px;
    }
  }
}
</style>
